<template>
  <!--引用表格-->
<!--  <BasicTable @register="registerTable" :rowSelection="rowSelection">
    &lt;!&ndash;插槽:table标题&ndash;&gt;
    <template #tableTitle>
      <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>

      <a-dropdown v-if="selectedRowKeys.length > 0">
        <template #overlay>
          <a-menu>
            <a-menu-item key="1" @click="batchHandleDelete">
              <Icon icon="ant-design:delete-outlined"></Icon>
              删除
            </a-menu-item>
          </a-menu>
        </template>
        <a-button>批量操作
          <Icon icon="mdi:chevron-down"></Icon>
        </a-button>
      </a-dropdown>
    </template>
    &lt;!&ndash;操作栏&ndash;&gt;
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
    </template>
    &lt;!&ndash;字段回显插槽&ndash;&gt;
    <template v-slot:bodyCell="{ column, record, index, text }">
    </template>
  </BasicTable>-->
  <!-- 表单区域 -->
  <div style="display:flex; ">
  <BasicForm @register="registerForm" style=" width:500px"/>
  <a-button type="primary" v-on:click="handleSubmit">查询</a-button>
  </div>

  <SsHolidayModal @register="registerModal" @success="handleSuccess"></SsHolidayModal>
  <div class="box" style="margin: 0 auto;width:896px;border:1px solid #000;height:600px">
    <h3></h3>
    <a-calendar
      :fullscreen="false"
      v-model:value="date"
      @panelChange="onPanelChange"
      @select="selectDate"
    >
      <template slot="headerRender">
        <div>
          <div class="calendar_select">
            <div class="calendar_s_select">
              //年、月筛选可通过a-select组件实现，想在改变年、月时改变日历，只需要改变a-calendar组件绑定的value即可
            </div>
          </div>
        </div>
      </template>
      <template #dateFullCellRender="{ current: value }">
        <div :class="getDateCss(value)" v-on:dblclick="showM(value)">
          {{ value.date() }}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{getTargetName(value)}}
        </div>
      </template>
    </a-calendar>
  </div>
</template>

<script lang="ts" name="baseinfo-ssHoliday" setup>
  import {ref, reactive, computed, unref, nextTick} from 'vue';
  import {BasicForm, useForm} from '/@/components/Form/index';
  import {BasicTable, useTable, TableAction} from '/@/components/Table';
  import {useModal} from '/@/components/Modal';
  import { useListPage } from '/@/hooks/system/useListPage'
  import SsHolidayModal from './components/SsHolidayModal.vue'
  import {list, deleteOne, batchDelete, getImportUrl,getExportUrl} from './SsHoliday.api';
  import { downloadFile } from '/@/utils/common/renderUtils';
  import { useUserStore } from '/@/store/modules/user';
  import dayjs from "dayjs";
  const queryParam = reactive<any>({});
  const checkedKeys = ref<Array<string | number>>([]);
  const userStore = useUserStore();
  //注册model
  const [registerModal, {openModal}] = useModal();
  import {columns, searchFormSchema} from './SsHoliday.data';
  import {queryDepartTreeSync} from "@/views/system/depart/depart.api";
  import {onMountedOrActivated} from "@/hooks/core/onMountedOrActivated";
  import {useMessage} from "@/hooks/web/useMessage";
  const { createMessage, createErrorModal,createWarningModal,createInfoModal } = useMessage();

  const [registerForm, {setProps,resetFields, setFieldsValue, validate,getFieldsValue}] = useForm({
    //labelWidth: 150,
    schemas: searchFormSchema,
    showActionButtonGroup: false,
    baseColProps: {span: 24}
  });
  //表单提交事件
  const holidays = reactive([]);


  onMountedOrActivated(()=>{
    const result1 =  queryDepartTreeSync({
    });

    result1.then((result)=>{
      console.log("result")
      if(result.length>0&& result[0].key)
        nextTick(()=>{
          console.log("111111111")
          console.log(result[0])
          setFieldsValue({departid:result[0].key})
          handleSubmit("fjfj");
        });

    })

  })

  async function handleSubmit(v) {
    try {
      let values = await validate();
      if(!values.departid){
        createMessage.warn("请先选择一个部门作为条件");
        return ;
      }
      //提交表单
      let res = await list(values);
      console.log(res);
      holidays.splice(0,holidays.length);
      res.records?.forEach((item,index)=>{
        holidays.push(item);
      });
      console.log(holidays)
    } finally {
    }
  }


/*
  //注册table数据
  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
      tableProps:{
           title: '节假日',
           api: list,
           columns,
           canResize:false,
           formConfig: {
              //labelWidth: 120,
              schemas: searchFormSchema,
              autoSubmitOnEnter:true,
              showAdvancedButton:true,
              fieldMapToNumber: [
              ],
              fieldMapToTime: [
              ],
            },
           actionColumn: {
               width: 120,
               fixed:'right'
            },
            beforeFetch: (params) => {
              return Object.assign(params, queryParam);
            },
      },
       exportConfig: {
            name:"节假日",
            url: getExportUrl,
            params: queryParam,
          },
          importConfig: {
            url: getImportUrl,
            success: handleSuccess
          },
  })

  const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext*/



   /**
    * 新增事件
    */
  function handleAdd(record) {
     openModal(true, {
       handleSubmit,
       record:record,
       isUpdate: false,
       showFooter: true,
     });
  }
   /**
    * 编辑事件
    */
  function handleEdit(record: Recordable) {
     openModal(true, {
       handleSubmit,
       record,
       isUpdate: true,
       showFooter: true,
     });
   }
   /**
    * 详情
   */
  function handleDetail(record: Recordable) {
     openModal(true, {
       record,
       isUpdate: true,
       showFooter: false,
     });
   }
   /**
    * 删除事件
    */
  async function handleDelete(record) {
     await deleteOne({id: record.id}, handleSuccess);
   }
   /**
    * 批量删除事件
    */
/*  async function batchHandleDelete() {
     await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
   }*/
   /**
    * 成功回调
    */
  function handleSuccess() {
//      (selectedRowKeys.value = []) && reload();
   }
   /**
      * 操作栏
      */
  function getTableAction(record){
       return [
         {
           label: '编辑',
           onClick: handleEdit.bind(null, record),
         }
       ]
   }
     /**
        * 下拉操作栏
        */
  function getDropDownAction(record){
       return [
         {
           label: '详情',
           onClick: handleDetail.bind(null, record),
         }, {
           label: '删除',
           popConfirm: {
             title: '是否确认删除',
             confirm: handleDelete.bind(null, record),
             placement: 'topLeft',
           }
         }
       ]
   }
  const _data = {
    xaxis: [
      "2024-04-24",
      "2024-04-22",
      "2024-04-20",
      "2024-04-15",
      "2024-04-10",
      "2024-04-21",
      "2024-05-21"
    ],
  };
  //例如给定的数据如下，当yaxis数值大于0时才返回date_select，在css文件中定义date_selec样式即可
 const getDateCss = val=> {
    let _className = "";
   holidays.forEach((e, i) => {
      if ( e.holiday == val.format("YYYY-MM-DD")) {
        _className = "date work";
        return;
      }
    });
    return _className;
  }
  const containTarget = val=>{
   let bl = false;
    holidays.forEach((e, i) => {
      if ( e.holiday == val.format("YYYY-MM-DD")) {
        bl =  true;
      }
    });
    return bl;
  }
  const getTarget = val=>{
    let bl = null;
    holidays.forEach((e, i) => {
      if ( e.holiday == val.format("YYYY-MM-DD")) {
        bl =  e;
      }
    });
    return bl;
  }
  const getTargetName = val=>{
    let bl = "";
    holidays.forEach((e, i) => {
      if ( e.holiday == val.format("YYYY-MM-DD")) {
        bl =  e.name;
      }
    });
    return bl;
  }

  const showM = (val)=>{
    let record =getTarget(val)
    if(containTarget(val)){
      console.log(record)
     handleEdit(record);
    }else{
      let rd = {};
      rd.holiday = val.format("YYYY-MM-DD");
      let fs  = getFieldsValue();
      console.log(fs);
      if(fs.departid){
      rd.departid = fs.departid;
      }
      handleAdd(rd);
    }
  }

  const date = ref();
  const onPanelChange = (a) => {
    console.log(a);
  };
  const selectDate = (val) => {
    date.value = val;
  };
  // 自定义日历头
  const format = (val) => {
    const newVal = dayjs(val).format("YYYY-MM");
    console.log(val, newVal);
    return newVal;
  };
  // 日期样式设置
/*  const getDateCss = (val) => {
    const day = val.day();
    const currentMonth = dayjs().month() + 1;
    const month = val.month() + 1;
    // 如果不是当前月份
    if (month !== currentMonth) {
      return "date";
    }
    // 如果是周六周日
    if (day === 6 || day === 0) {
      return "date week";
    } else {
      return "date work";
    }
  };*/
</script>

<style scoped lang="less">
  .box {
    .header {
      padding: 12px;
      text-align: center;
    }
    .date {
      position: relative;
      z-index: 2;
      display: inline-block;
      min-width: 24px;
      height: 24px;
      line-height: 24px;
      border-radius: 2px;
      transition: background 0.3s, border 0.3s;
      &.work {
        background-color: rgb(20, 134, 228);
      }
      &.week {
        background-color: rgb(193, 240, 97);
      }
    }
  }
</style>
